<template>

  <div>
    <el-button @click="showMap">点击定位</el-button>

    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" @moving="syncCenterAndZoom">
      <bm-marker :position="marker" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">

      </bm-marker>

    </baidu-map>
  </div>
</template>

<script>

export default {
  data() {
    return {
      center: {lng: 0, lat: 0},
      marker: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      map.enableScrollWheelZoom(true)
      this.zoom = 15
    },
    showMap() {

      //需要的 定位的 经纬度
      this.center.lng = 111.448543
      this.center.lat = 35.882062
      this.marker.lng = 111.448543
      this.marker.lat = 35.882062


      console.info("触发")
    },
    syncCenterAndZoom(e) {
      //移动 触发
      const {lng, lat} = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat

      this.zoom = e.target.getZoom()
      //打印 坐标
      console.info("lng:", lng, "lat:", lat)
    },


  }

}
</script>


<style scoped>
.bm-view {
  width: 800px;
  height: 400px;
}
</style>
